<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <style type="text/css">
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 3px;
        }
        .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
            padding-right: 0px;
        }
        .el-tooltip__popper{ max-width:20%; }
        .el-tooltip__popper{
            display: none;
        }

        .el-table{
            /*font-weight: bold;*/
            overflow: visible !important;
        }

        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }

        /**列表内容超出自动换行**/
        /*.layui-table-cell {
            height: auto;
            overflow:visible;white-space:normal;text-overflow:clip;
            word-break: break-all;
        }*/


        /* 列表样式修改*/
        /* 去掉最下面的那一条线 */
        .el-table::before {
            height: 0px;
        }

        /* 表格斑马自定义颜色 */
        .el-table__row.warning-row {
            background: #F1F1F1;
        }

        /* 合计颜色重置 */
        .el-table__footer-wrapper tbody td.el-table__cell {
            background: #fff;
        }

        table {
            border-color: black !important;
        }

        /** 改变边框颜色 */
        /* .el-table--border,
        .el-table--group {
            border: 1px solid #CCCCCC !important;
        } */

        /** 改变表格内竖线颜色 */
        .el-table--border td,
        .el-table--border th,
        .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
            border-right: 1px solid #CCCCCC !important;
        }

        /** 改变表格内行线颜色 */
        .el-table td,
        .el-table th.is-leaf {
            border-bottom: 1px solid #CCCCCC !important;
        }

        .el-table thead tr th {
            border-color: #8c939d;

        }
        .el-table th.el-table__cell{
            background: #f5f7fa;
        }
        .el-table thead {
            color: #606266;
        }
        .el-table td{
            font-size: 14px;
            background: #dfefff6b;
        }

        .el-divider--horizontal {
            margin: 12px 0px;
        }
    </style>
</head>
<body>
    <div id="app">

        <el-table
                :data="tableData"
                height="600"
                size="mini"
                border
                style="width: 100%">

            <el-table-column prop="show_name" label="字段中文名称" width="200px" >
                <template  slot-scope="scope">
                    <el-input  size="mini" v-model="scope.row['show_name']"  ></el-input>
                </template>
            </el-table-column>

            <el-table-column prop="show_order" label="排序号" >
                <template  slot-scope="scope">
                    <el-input  size="mini" v-model="scope.row['show_order']"  ></el-input>
                </template>
            </el-table-column>

            <el-table-column prop="is_list" label="列表是否显示" >
                <template  slot-scope="scope">
                    <el-select v-model="scope.row['is_list']"  size="mini" >
                        <el-option value="1" label="否"></el-option>
                        <el-option value="0" label="是"></el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column prop="is_search" label="是否默认查询" >
                <template  slot-scope="scope">
                    <el-select v-model="scope.row['is_search']"  size="mini" >
                        <el-option value="1" label="否"></el-option>
                        <el-option value="0" label="是"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="is_null" label="是否可空" >
                <template  slot-scope="scope">
                    <el-select v-model="scope.row['is_null']"  size="mini" >
                        <el-option value="1" label="不可空"></el-option>
                        <el-option value="0" label="可空"></el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column prop="is_list_edit" label="列表是否可编辑" >
                <template  slot-scope="scope">
                    <el-select v-model="scope.row['is_list_edit']"  size="mini" >
                        <el-option value="1" label="否"></el-option>
                        <el-option value="0" label="是"></el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column prop="list_width" label="列宽" >
                <template  slot-scope="scope">
                    <el-input  size="mini" v-model="scope.row['list_width']"  ></el-input>
                </template>
            </el-table-column>

            <el-table-column prop="is_input" label="录入是否显示" >
                <template  slot-scope="scope">
                    <el-select v-model="scope.row['is_input']" size="mini"  >
                        <el-option value="1" label="否"></el-option>
                        <el-option value="0" label="是"></el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column prop="msg" label="说明" >
                <template  slot-scope="scope">
                    <el-input  size="mini" v-model="scope.row['msg']"  ></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="double_length" label="小数点位数" >
                <template  slot-scope="scope">
                    <el-input  size="mini" v-model="scope.row['double_length']"  ></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="col_style" label="输入框类型" width="150px" >
                <template  slot-scope="scope">
                    <el-select v-model="scope.row['col_style']"  size="mini" >
                        <el-option value="0" label="输入框" ></el-option>
                        <el-option value="1" label="日期框" ></el-option>
                        <el-option value="5" label="时分秒日期框" ></el-option>
                        <el-option value="6" label="下拉框" ></el-option>
                        <el-option value="12" label="下拉框多选" ></el-option>
                        <el-option value="8" label="自定义下拉框" ></el-option>
                        <el-option value="13" label="自定义下拉框多选" ></el-option>
                        <el-option value="4" label="文件上传框" ></el-option>
                        <el-option value="10" label="开关" ></el-option>
                        <el-option value="3" label="文本编辑框" ></el-option>
                        <el-option value="11" label="三级联动选择框" ></el-option>
                        <el-option value="14" label="列表组件" ></el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column prop="select_dict_id" label="数据字典key" >
                <template  slot-scope="scope">
                    <el-select v-model="scope.row['select_dict_id']" filterable  size="mini" >
                        <el-option v-for="(item,index) in dataDictionary" :value="item.code_value" :label="item.code_name" ></el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column prop="col_name" label="字段名称" >
                <template  slot-scope="scope">
                    <el-input  size="mini" v-model="scope.row['col_name']"  ></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="length" label="字段长度" >
                <template  slot-scope="scope">
                    <el-input  size="mini" v-model="scope.row['length']"  ></el-input>
                </template>
            </el-table-column>

            <el-table-column prop="data_zygl_id" label="表id" width="180px" >
                <template  slot-scope="scope">
                    <el-select v-model="scope.row['data_zygl_id']" filterable size="mini" @change="getAllFieldsAccordingToTheTable(scope.row['data_zygl_id'])" >
                        <el-option v-for="(item,index) in dataTableDataIds" :value="item.id" :label="item.name" ></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="select_v" label="自定义下拉框实际字段" >
                <template  slot-scope="scope">
                    <el-select v-model="scope.row['select_v']"  size="mini" >
                        <el-option v-for="(item,index) in columnsForTableId[scope.row['data_zygl_id']]"  :value="item.col_name" :label="item.show_name"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="select_text" label="自定义下拉框显示字段" >
                <template  slot-scope="scope">
                    <el-select v-model="scope.row['select_text']"  size="mini" >
                        <el-option v-for="(item,index) in columnsForTableId[scope.row['data_zygl_id']]"  :value="item.col_name" :label="item.show_name"></el-option>
                    </el-select>
                </template>
            </el-table-column>



        </el-table>
    </div>
</body>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            tableData: [],
            parmsData:{},
            dataDictionary:[],
            dataTableDataIds:[],
            columnsForTableId:[],
        },
        created(){
            this.parmsData = getParams();
            this.getHead();
            this.getDataDictionary();
            this.getTableIds();
        },
        methods:{
            async getHead(){
                const res = await post("/admin/api/FieldManagementController/getListColumns", {zygl_id: this.parmsData.zygl_id,ids:""+this.parmsData.ids});
                this.tableData = res.data;

            },
            async getDataDictionary(){
                const res = await post("/admin/api/DataManagementController/getDataDictionary", {});
                this.dataDictionary = res.data;
            },
            async getTableIds(){
                const res = await post("/admin/api/DataManagementController/getTableAll", {});
                this.dataTableDataIds = res.data;
            },
            async getAllFieldsAccordingToTheTable(tableId){
                const res = await post("/admin/api/DataManagementController/getAllFieldsAccordingToTheTable",{tableId:tableId});
                Vue.set(this.columnsForTableId,tableId,res.data);
            }
        },

    })

    function getData() {
        return vm.tableData;
    }
</script>
</html>